<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用同步的方式编写异步代码</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <script type="module">
        /**
         * async 当一个函数标记为 async 后，该函数会返回一个 Promise 对象，异步执行。
         *
         * await 只能在 async 函数内部使用，加上 await 关键字后，会在执行到这一行时暂停函数的剩余部分，等待异步请求完成后继续执行。
         *
         * 使用同步的方式编写异步代码，避免回调地狱。
         * 优势，在处理多个异步操作的情况下，可以使代码更简洁易读。
         * 回调地狱是指过度使用嵌套的回调函数，导致代码难以阅读和维护。
         */

        

        let getUrl = "http://127.0.0.1:9090/ss-app/sc/get";
        let postUrl = "http://127.0.0.1:9090/ss-app/sc/post/form";
        let postJsonUrl = "http://127.0.0.1:9090/ss-app/sc/post/body";

        const getData = async () => {
            try {
                // 第一次调用
                const resGet = await axios.get(getUrl);
                console.log("第一次请求：", resGet.data);

                // 使用第一次的值进行第二次调用
                let data = {
                    "annexId": "1046878434611077121",
                    "bizId": "1046878434611077121"
                };
                const resPost = await axios.post(postUrl, data, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                });
                console.log("第二次请求：", resPost.data);

                // 使用第二次的值进行第三次调用
                let loginData = {
                    "loginName": "1046878434611077121",
                    "password": "1046878434611077121"
                }
                const resPostJson = await axios.post(postJsonUrl, data);
                console.log("第三次请求：", resPostJson.data);
            } catch (e) {
                console.log("请求异常：", e);
            } finally {
                console.log("请求结束");
            }
        };

        getData();
        
    </script>
</body>
</html>